<template>
  <div id="app">
    <div  v-show="show" class="tabbar">
    	<router-link to="/first">
    		<dl>
    			<dt><img src="../static/img/1.png"></dt>
    			<dd>首页</dd>
    		</dl>
    	</router-link>
    	<router-link to='/jian'>
    		<dl>
    			<dt><img src="../static/img/2.png"></dt>
    			<dd>尖货</dd>
    		</dl>
    	</router-link>
    	<router-link to='/fen'>
    		<dl>
    			<dt><img src="../static/img/3.png"></dt>
    			<dd>分类</dd>
    		</dl>
    	</router-link>
    	<router-link to='/car'>
    		<dl >
    			<dt><img src="../static/img/4.png"></dt>
    			<dd>购物车</dd>
    		</dl>
    	</router-link>
    	<router-link to='/my'>
    		<dl >
    			<dt @click="qudi" ><img src="../static/img/5.png"></dt>
    			<dd @click="qudi">{{mssg}}</dd>
    		</dl>
    	</router-link>
    </div>
    <!--容器-->
    <router-view></router-view>
  </div>
</template>

<script>
/*引入模块*/
import First from './pages/first'
import Lunbo from './components/lunbo'
export default {
	data(){
		return{
			show:true,
			show1:false,
      mssg:'我的'
		}
	},
  name: 'app',
  components: {
  	/*注册*/
    First,
    Lunbo
	},
	methods:{
		qudi(){
			this.show=false
		}
	},
	mounted(){
		this.show=true
	},
	watch:{}
}
</script>

<style>

* {
  margin: 0;
  padding: 0;
}
.tabbar{
	text-align: center;
	position: fixed;
	bottom: 0;
	left:0;
	right: 0;
	display: flex;
	justify-content: space-around;
	align-items: center;
	font-size: .3rem;
	text-align: center;
	background: white;
	height: 1rem;
}
.tabbar>a{
	text-decoration: none;
	width: 19%;
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin-bottom: -2%;
}
.tabbar dl dt img{
	width: 50%;
}
.tabbar dd{
	text-align: center;
	color:gray;
	margin-left:-2%;
}
.router-link-active{
	background-color: line-gray;
	opacity: 0.4;
}
</style>
